<template>
  <div class="btnRadioCContainer" :style="getParm()">
    <label class="item" v-for="(option, index) in props.options" :key="index">
      <input
        type="radio"
        :value="option.value"
        v-model="selectedValue"
        name="btnRadioC"
        class="btnRadioCRadio"
      />
      <span class="btnRadioCItemContent">{{ option.title }}</span>
    </label>
  </div>
</template>

<script setup lang="ts">
import { PropType } from "vue";

const selectedValue = ref("a");
defineExpose({
  selectedValue,
});

const props = defineProps({
  options: {
    type: Array as PropType<Array<{ value: string; title: string }>>,
    required: false,
    default: () => {
      return [
        { value: "a", title: "dawe" },
        { value: "b", title: "467e" },
        { value: "c", title: "3132" },
      ];
    },
  },

  checkColor: {
    type: String,
    required: false,
    default: "#a3a3a3",
  },

  noCheckColor: {
    type: String,
    required: false,
    default: "#035db9",
  },

  fontSize: {
    type: String,
    required: false,
    default: "18px",
  },
});

const getParm = () => {
  return `--check-color: ${props.checkColor}; --nocheck-color: ${props.noCheckColor}; --main-font-size: ${props.fontSize};`;
};
</script>

<style scoped lang="scss">
.btnRadioCContainer {
  @include relative_hw(25px, 100%);
  flex-direction: row;
  justify-content: space-between;
  align-items: center;

  .item {
    @include relative_hw(25px, auto);
    .btnRadioCRadio {
      clip: rect(0 0 0 0);
      clip-path: inset(100%);
      height: 1px;
      overflow: hidden;
      position: absolute;
      white-space: nowrap;
      width: 1px;
    }

    .btnRadioCItemContent {
      cursor: pointer;
      @include rel_cen_hw(auto, auto);
      font-size: var(--main-font-size);
      color: var(--nocheck-color);
      transition: all 0.5s ease;
      font-weight: 400;

      &:active {
        transform: scale(0.86);
      }
    }

    .btnRadioCRadio:checked + .btnRadioCItemContent {
      color: var(--check-color);
      z-index: 9;
    }
  }
}
</style>
